<script setup>
import {getProList, addProData,editProData, delProData, getPro} from '../api/homeApi'
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()

const proList = ref([])
let count = ref(0)
const page = ref(1)

getProList({page: page.value}).then(res => {
  proList.value = res.proList
  count.value = res.count
})

// 页面切换的事件
function changePage(num){
  page.value = num

  getProList({page: page.value}).then(res => {
    proList.value = res.proList
    count.value = res.count
  })

}


const title = ref('')

function addItem(){
  const obj = {
    proname: title.value,
    'kind': '童装',
    'price': 80 ,
    'proStart' : '❤❤❤❤❤',  
    'proid': 'pro-' + Math.random(),
    name: '老吴',
    createTime: new Date()
  }
  addProData(obj).then(res => {
    console.log(res);
    getProList({page: page.value}).then(res => {
      proList.value = res.proList
      count.value = res.count
   })

  })
  
}

// 修改按钮的点击事件
function editClick(row){
  // console.log(row);
  row.proname += '666666'
  editProData(row).then(res => {
    // console.log(res)
    getProList({page: page.value}).then(res => {
      proList.value = res.proList
      count.value = res.count
   })
  })
}

// 删除按钮的点击事件
function delClick(row){
  delProData({proid: row.proid}).then(res => {
    console.log(res);
    getProList({page: page.value}).then(res => {
      proList.value = res.proList
      count.value = res.count
   })
  })
}

  const proname = ref('')
  function sItem(){
    console.log(proname.value);
    getPro({proname: proname.value}).then(res => {
      console.log(res);
      proList.value = res.proList
      count.value = res.count
    })
  }

  // 查看详情接口
  function detailClick(row){

    // router.push('/about/' + row.proid)

    // 通过 query 传递参数
    router.push({
      path: '/about',
      query: {
        proid: row.proid
      }
    })
  }

</script>

<template>
  <main>
    <input type="text" v-model="title">
    <el-button @click="addItem">新增</el-button>

    <input type="text" v-model="proname">
    <el-button @click="sItem">查询</el-button>

    <el-table :data="proList" stripe style="width: 100%">
    <el-table-column prop="createTime" label="时间" />
    <el-table-column prop="proname" label="商品名称" />
    <el-table-column prop="kind" label="分类" />
    <el-table-column label="星级">
      <template #default="scope">
        <span style="color: red">{{ scope.row.proStart }}</span>
    </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="editClick(scope.row)">修改</el-button>
        <el-button type="success" @click="delClick(scope.row)">删除</el-button>
        <el-button type="success" @click="detailClick(scope.row)">查看详情</el-button>
    </template>
    </el-table-column>

  </el-table>

  <el-pagination @current-change="changePage" v-model:current-page="page" background layout="prev, pager, next" :total="count" />

  </main>
</template>
